<template>
  <div class="juse1">
    <daohang @handletab="maodian" :list="list"></daohang>

    <div class="jueseContent" ref="jueseContent">



      <div class="zhuli" ref="title1" id="section1">
        <div class="title  animate__animated animate__fadeInUp">
          智能助理
        </div>
        <div class="all">
          <!-- :class="{
            'allItem1': item.type == 1,
            'allItem2': item.type == 2,
            'allItem3': item.type == 3,
          }"  -->
          <div :class="'allItem  animate__animated animate__fadeInUp animate__fadeInUp animate__delay-0' + i * 1 + 's'"
            v-for="(item, i) in zn_list" :key="i">
            <div class="title">
              <div class="type" :class="{
                'gen': item.type == 1,
                'tou': item.type == 2,
                'yu': item.type == 3,
              }">{{ item.typeText }}</div>
              <div>{{ item.title }}</div>
            </div>
            <div class="conten">
              <div class="icon">
                <img :src="getImg(item.icon)" alt="">
              </div>
              <div class="nei">
                <div class="neiTitle">{{ item.title1 }}</div>
                <div class="neiCon">{{ item.content }}</div>

              </div>

            </div>
            <div class="jianyi" :style="{
              backgroundImage: `url(${getImg('znB' + item.type + '.png')})`
            }">
              <div class="ji">
                <div class="xiaoji">
                  <img src="@/assets/images/zn.png" alt="">
                </div>
                <div class="jyT" :class="{
                  'gen2': item.type == 1,
                  'tou2': item.type == 2,
                  'yu2': item.type == 3,
                }">智能助手建议</div>
              </div>
              <div class="jian">
                <div class="jyC">
                  {{ item.jianyi }}
                </div>
                <div class="anniu" @click="to(item)" :class="{
                  'gen': item.type == 1,
                  'tou': item.type == 2,
                  'yu': item.type == 3,
                }">{{ item.type == 1 ? '去跟进' : '去处理' }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="jiashichang" ref="title2" id="section2">

        <div class="title">
          数据驾驶舱
        </div>
        <div class="shang">
          <div :class="'sItem animate__animated animate__fadeInUp animate__fadeInUp animate__delay-0' + 1 * index + 's'"
            v-for="(item, index) in 3" :key="item">
            <img :src="require(`@/assets/images/jsc_${item}.png`)" alt="">
          </div>
        </div>
        <div class="zhong">
          <div class="zItem" v-for="item in 2" :key="item">
            <img :src="require(`@/assets/images/jsc2_${item}.png`)" alt="">
          </div>
        </div>
        <div class="xia">
          <img src="@/assets/images/jsc3_1.png" alt="">
        </div>

      </div>
      <div class="daiban" ref="title3" id="section3">

        <div class="title">
          待办事项
        </div>
        <div class="db_all">

          <div class="dbItem" v-for="(item, i) in daibanList" :key="i">

            <div class="title">
              <div class="type" :class="leixing == 2 && item.type == 1 ? 'lv' : ''">
                {{ item.typeText }}
              </div>
              <div class="zi"> {{ item.title }}</div>
            </div>

            <div v-if="item.type == 1" class="content">


              <div class="con">
                <div v-if="leixing == 2">审批意见:</div>
                {{ item.content }}
              </div>

              <div class="jianyi">
                <div class="ji">
                  <div class="xiaoji">
                    <img src="@/assets/images/zn.png" alt="">
                  </div>
                  <div class="jyT" :class="{
                    'gen2': item.type == 1,
                    'tou2': item.type == 2,
                    'yu2': item.type == 3,
                  }">智能助手建议</div>
                </div>
                <div class="jyC">{{ item.jianyi }}</div>
              </div>
            </div>
            <div v-if="item.type == 2" class="content2">
              <div class="left">
                <div class="lItem">
                  有效期：2023.09.27-10.11
                </div>
                <div class="lItem">
                  折扣配置：7折
                </div>
                <div class="lItem">
                  购买次数：不限购
                </div>
                <div class="lItem">
                  参与用户：不限制
                </div>
                <div class="lItem">
                  活动说明：凡在9.27-10.11在期间购红楼门票，可享8折。
                </div>
              </div>
              <div class="right">
                <div class="rItem">
                  活动GMV目标：189万
                </div>
                <div class="rItem">
                  额净GMV目标：37.8万
                </div>
              </div>
            </div>
            <div class="an">
              <div class="anniu" @click="go(item)">
                <span  v-if="leixing == 2 && item.type == 1">
                  去查看
                </span>
                <span v-else>去处理</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="changyong" ref="title4" id="section4">
        <div class="title">
          常用功能
        </div>
        <div class="cyAll">
          <div class="cyItem" v-for="(item, i) in cyList" :key="i">
            <img :src="require(`@/assets/images/${item.img}.png`)" alt="">
            <div class="name">{{ item.name }}</div>



          </div>
        </div>
      </div>
      <div class="hangye" ref="title5" id="section5">
        <div class="title">
          行业资讯
        </div>

        <div class="daohang">
          <div class="dhItem" @click="dao(i)" :class="daoI == i ? 'active' : ''" v-for="(item, i) in hyList" :key="i">

            {{ item.name }}

          </div>
        </div>
        <div class="xinwen">
          <div class="xwItem" v-for="(item, i) in 4" :key="i">
            <img :src="getImg('xw' + item + '.png')" alt="">
          </div>



        </div>


      </div>


    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
leixing:'',
      zn_list: [
        {
          type: '3',
          typeText: '预警',
          title: '育商风险提示',
          icon: 'zn1.png',
          title1: '问题商户：张亮麻辣烫',
          content: '根据育商风控指标，针对张亮麻辣烫商家 进',
          jianyi: '主动推动参与园区内营销活动，提升 销量或',
        },
        {
          type: '2',
          typeText: '投诉',
          title: '消费者投诉问题',
          icon: 'zn2.png',
          title1: '问题商户：禾之鲜回转寿司',
          content: '消费者通过315消协进行了关于商品质量问',
          jianyi: '在舆论上通过平台，做出正面积极响应 跟踪',
        },
        {
          type: '1',
          typeText: '跟进',
          title: '【巴蜀】供应链系统致辞跟进',
          icon: 'zn3.png',
          title1: '系统使用率',
          content: '使用ERP系统商家：40% 使用WMS系',
          jianyi: '结合商区内商户的共同需求，统一招标。把控',
        },
        {
          type: '1',
          typeText: '跟进',
          title: '茶饮态商户经营建议',
          icon: 'zn4.png',
          title1: '偏好分析',
          content: '通过对商品偏好分析发现用户对绿茶的接受度',
          jianyi: '商家增加特色茶饮品类，匹配用户的相 关需',
        },
        {
          type: '1',
          typeText: '跟进',
          title: '茶颜悦色入驻完成，运营服务介入',
          icon: 'zn5.png',
          title1: '运营指导',
          content: '1，享受商区统一要求的三保服务 2，享受',
          jianyi: '商家增加特色茶饮品类，匹配用户的相 关需',
        },
        {
          type: '3',
          typeText: '预警',
          title: '品牌事件反应预警',
          icon: 'zn2.png',
          title1: '问题商户：必胜客',
          content: '北京必胜客篡改食材保质期标签，一家 门店',
          jianyi: '1，公开透明食材操作间，建议使用直播方式',
        },
      ],
      daibanList: [
        // {
        //   type: '1',
        //   typeText: '待办审批',
        //   title: '【张亮麻辣烫】清退申请待审批',
        //   content: '白梅于2023.10.07邀约商户协商沟',
        //   jianyi: '请参照智能助手建议，清退【张亮麻辣烫】',
        // },
        {
          type: '2',
          typeText: '限时折扣',
          title: '9.27限时折扣活动——待审批',

        },
        {
          type: '2',
          typeText: '限时折扣',
          title: '9.27限时折扣活动——待审批',

        },
      ],

      list: [
        {
          id: '1',
          name: "智能助理",
          active:true,

        },
        {
          id: '2',
          name: "数据驾驶舱",
          active: false,

        },
        {
          id: '3',
          name: "重要待办",
          active: false,
        },
        {
          id: '4',
          name: "常用功能",
          active: false,
        },
        {
          id: '5',
          name: "行业资讯",
          active: false,
        },
      ],


      hyList: [
        {
          id: '1',
          name: '园区动态',
        },
        {
          id: '1',
          name: '园区资讯',
        },
        {
          id: '1',
          name: '商业资讯',
        },
        {
          id: '1',
          name: '成长攻略',
        },
      ],


      cyList: [
        {
          name: '同业联盟',
          img: 'cy1',
        },
        {
          name: '供应链共享',
          img: 'cy2',
        },
        {
          name: '异业联盟',
          img: 'cy3',
        },
        {
          name: '商业拓展',
          img: 'cy4',
        },
        {
          name: '消费者投诉',
          img: 'cy5',
        },
        {
          name: '政务协助',
          img: 'cy6',
        },
        {
          name: '技术协助',
          img: 'cy7',
        },
        {
          name: '商户投诉',
          img: 'cy8',
        },
        {
          name: '装修推荐',
          img: 'cy9',
        },
        {
          name: '停车助理',
          img: 'cy10',
        },
        {
          name: '商户管理',
          img: 'cy11',
        },
        {
          name: '更多',
          img: 'cy12',
        },
      ],





      jinxingIndex: 0,
      daoI: '0',
      interval: null,

    }
  },
  mounted() {
    let num = window.localStorage.getItem("status") || ''
    // console.log(num, 'num');
this.leixing = num
    if (num == 1) {
      //提案返回过来的
      let obj1 = {
        type: '1',
        typeText: '跟进',
        title: '提质风险跟进',
        icon: 'fx1.png',
        title1: '问题商户：张亮麻辣烫',
        content: '提质张亮麻辣烫，白梅于2023.10.07邀约商户协商沟通',
        jianyi: '操作间直播，提高加工过程透明化，可以给与技术支持',
      }
      let obj2 = {
        type: '1',
        typeText: '待办审批',
        title: '【张亮麻辣烫】清退申请待审批',
        content: '白梅于2023.10.07邀约商户协商沟',
        jianyi: '请参照智能助手建议，清退【张亮麻辣烫】',
      }
      this.zn_list[0] = obj1
      this.daibanList.unshift(obj2)
    } else if (num == 2) {
      let obj1 = {
        type: '1',
        typeText: '跟进',
        title: '清退问题跟进',
        icon: 'fx2.png',
        title1: '问题商户：张亮麻辣烫',
        content: '白梅于2023.10.09号邀约商家协商处理清退事项',
        jianyi: '建议清退过程，拆除装潢，还原商铺原貌',
      }
      let obj2 = {
        type: '1',
        typeText: '审批通过',
        title: '[张亮麻辣烫]清退申请审批通过',
        content: '白梅于2023.10.09号邀约商家协商处理清退事项',
        jianyi: '建议清退过程，拆除装潢，还原商铺原貌',
      }
      this.zn_list[0] = obj1
      this.daibanList[0] = obj2

    }
    this.$forceUpdate()
  },
  methods: {
    maodian(num) {
      // let parent = this.$refs['title' + num]
      // let target = this.$refs.jueseContent

      // this.$nextTick(() => {
      //   target.scrollTo(0, target.offsetTop - parent.offsetTop);
      //   console.log(target.offsetTop, 'target.offsetTop');
      // })
      this.list.map((item, i) => {
        if (i <= (num - 1)) {
          item.active = true
        } else {
          item.active = false
        }
      })
      console.log(num)
      var tar = document.getElementById('section' + num)
      var soltop = tar.offsetTop
      $(this.$refs.jueseContent).animate({
        scrollTop: soltop - 280
      }, 666)
      this.$forceUpdate()
    },
    jinxingClick(item, i) {
      this.jx_List = item.list
      this.jinxingIndex = i
    },
    dao(i) {
      this.daoI = i
    },
    getImg(res) {
      //必须拼接一下
      return require(`@/assets/images/${res}`);//res就是图片的名字
    },
    to(item) {
      if (item.title1 == '问题商户：张亮麻辣烫') {
        this.$router.push({
          path: '/govIndexData2/fengxian',
        })
      }
    },
    go(item) {
      if (item.type == 1 && this.leixing == 1) {
        this.$router.push({
          path: '/govIndexData2/daiban',
        })
      }else if(item.type == 1 && this.leixing == 2){
        this.$router.push({
          path: '/govIndexData2/daiban2',
        })
      }
    },
  },
}
</script>
<style scoped>
@import "../../../assets/css/buzoutiao.css";
</style>
<style lang="scss" scoped>
.anniu {
  cursor: pointer;
}

.juse1 {
  height: 100%;
}

// .jueseContent {
//   overflow-y: auto;
//   height: calc(100% - 88px);
// }

.jindu {
  display: flex;
  align-items: center;
  width: 1376px;
  height: 88px;
  background: #FFFFFF;
  box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.03);
  border-radius: 12px 12px 12px 12px;
  opacity: 1;
  border: 0px solid #DDDDDD;
  margin-bottom: 32px;
}

.zhuli {
  margin: 0 0 32px;

  .title {
    font-size: 20px;
    // font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.9);
    margin-bottom: 16px;
  }

  .all {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .allItem {
      margin-bottom: 24px;
      width: 443px;
      height: 289px;
      background: linear-gradient(180deg, #EBF3FF 0%, #FFFFFF 100%);
      box-shadow: 0px 8px 16px 0px rgba(128, 145, 193, 0.28);
      border-radius: 12px;
      border: 1px solid #FFFFFF;
      box-sizing: border-box;
      padding: 20px;
      transition: all 0.3s;
      &:hover{
        border-color: rgba(128, 145, 193, 0.28);
      }
      .title {
        font-size: 16px;
        // font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #000000;
        display: flex;

        .type {
          text-align: center;
          line-height: 24px;
          width: 40px;
          height: 24px;
          border-radius: 6px;
          margin-right: 12px;
          font-size: 12px;
          // font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #FFFFFF;
        }


      }

      .conten {
        display: flex;
        margin: 20px 0;

        .icon {
          width: 107px;
          height: 50px;
          margin-right: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          // border: 1px solid red;

          img {
            max-width: 100%;
            max-height: 100%;
            object-fit: cover;
          }
        }

        .nei {
          width: calc(100% - 127px);


          .neiTitle {
            font-size: 14px;
            // font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #000000;
            margin-bottom: 9px;
          }

          .neiCon {
            font-size: 14px;
            // font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #000000;
            height: 40px;
          }

        }
      }

      .jianyi {
        width: 395px;
        height: 111px;
        // background: #E0E9FF;
        border-radius: 8px;
        // border: 1px solid #C5D5FF;
        box-sizing: border-box;
        padding: 20px;

        // background: url('~@/assets/images/shishi.png');
        background-position: 100% 100%;
        background-size: cover;

        .ji {
          display: flex;
          margin-bottom: 5px;
        }

        .xiaoji {
          width: 34px;
          height: 34px;
          margin-right: 5px;
          display: flex;
          align-items: center;
          line-height: 34px;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .jyT {
          font-size: 16px;
          // font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          line-height: 34px;

        }

        .gen2 {
          color: #2C68FF;
        }

        .tou2 {

          color: #FF8431;
        }

        .yu2 {

          color: #FF0000;
        }

        .jian {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .jyC {
            width: 240px;
            font-size: 14px;
            // font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #353535;
          }

          .anniu {
            text-align: center;
            width: 75px;
            height: 32px;
            border-radius: 8px;
            font-size: 16px;
            // font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #FFFFFF;
            line-height: 32px;
          }
        }

      }

      .gen {
        background: #2C68FF;
      }

      .tou {
        background: #FF8D00;
      }

      .yu {
        background: #FF1F00;
      }
    }

    .allItem1 {
      background: linear-gradient(180deg, #EBF3FF 0%, #FFFFFF 100%);
    }

    .allItem2 {
      background: linear-gradient(180deg, #FFF4EB 0%, #FFFFFF 100%);
    }

    .allItem3 {
      background: linear-gradient(180deg, #FFF2F2 0%, #FFFFFF 100%);
    }
  }
}

.daiban {
  box-sizing: border-box;
  width: 100%;

  .title {
    font-size: 20px;
    // font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.9);
    margin-bottom: 15px;
  }

  .db_all {
    display: flex;


    .dbItem {
      margin-right: 24px;
      // width: 443px;
      // height: 310px;
      background: #FFFFFF;
      box-shadow: 0px 1px 4px 0px rgba(13, 46, 166, 0.02), 0px 2px 12px 0px rgba(13, 46, 166, 0.04), 0px 2px 6px 0px rgba(13, 46, 166, 0.02);
      border-radius: 12px;

      box-sizing: border-box;
      padding: 15px 24px;
      transition: all 0.3s;
      &:hover{
        transform: translateY(-10px);
      }
      .title {
        display: flex;
        align-items: center;
        margin-bottom: 21px;

        .type {
          margin-right: 10px;
          text-align: center;
          line-height: 24px;
          width: 64px;
          height: 24px;
          background: #FFFFFF;
          border-radius: 6px;
          border: 1px solid #FF8F00;
          font-size: 12px;
          // font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #FF8F00;
        }

        .zi {
          font-size: 16px;
          // font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #000000;
        }

      }

      .content {
        .con {
          font-size: 14px;
          // font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #000000;

        }

        .jianyi {
          margin-top: 30px;
          width: 395px;
          box-sizing: border-box;
          padding: 15px;
          height: 115px;
          background: #F5F7FC;

          .ji {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
          }

          .xiaoji {
            width: 34px;
            height: 34px;
            margin-right: 5px;
            display: flex;
            align-items: center;


            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .jyT {
            font-size: 16px;
            // font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #2C68FF;
            line-height: 34px;
          }
        }
      }

      .content2 {
        border-bottom: 1px solid #ddd;
        box-sizing: border-box;
        padding-bottom: 14px;
        display: flex;
        font-size: 14px;
        // font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;

        .left,
        .right {
          width: 184px;

          .lItem,
          .rItem {
            margin-bottom: 10px;
          }
        }
      }

      .an {
        display: flex;
        justify-content: end;
        margin-top: 15px;

        .anniu {
          width: 72px;
          height: 32px;
          background: #0661FB;
          border-radius: 8px;
          line-height: 32px;
          text-align: center;
          font-size: 16px;
          // font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #FFFFFF;
        }
      }
    }
  }
}

.changyong {
  box-sizing: border-box;
  width: 100%;
  margin: 40px 0;

  .title {
    font-size: 20px;
    // font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.9);
    margin-bottom: 15px;
  }

  .cyAll {
    //  width: 100%;
    box-sizing: border-box;
    height: 312px;

    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0px 1px 4px 0px rgba(13, 46, 166, 0.02), 0px 2px 12px 0px rgba(13, 46, 166, 0.04), 0px 2px 6px 0px rgba(13, 46, 166, 0.02);
    box-sizing: border-box;
    padding: 40px 0px 0;
    display: flex;
    flex-wrap: wrap;

    .cyItem {
      width: 14.28%;
      height: 120px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .name {
        margin-top: 10px;
        text-align: center;
        font-size: 14px;
        // font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
      }

      &:hover {
        background: #F8F9FA;
      }

      border-radius: 8px;

      img {
        width: 40px;
        height: 40px;
        box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.57);
        border-radius: 9px;
      }
    }
  }
}

.hangye {
  .title {

    font-size: 20px;
    // font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.9);
    margin-bottom: 15px;
  }

  .daohang {
    display: flex;
    margin-bottom: 15px;

    .dhItem {
      cursor: pointer;
      margin-right: 5px;
      width: 112px;
      height: 40px;
      background: #FFFFFF;
      border-radius: 3px;
      border: 1px solid #DCDCDC;
      text-align: center;
      line-height: 40px;
      font-size: 16px;
      // font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.9);
    }

    .active {
      background: #0052D9;
      color: rgba(255, 255, 255, 0.9);
    }





  }

  .xinwen {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;

    .xwItem {

      width: 326px;
      height: 368px;
      background: #FFFFFF;
      box-shadow: 0px 1px 4px 0px rgba(13, 46, 166, 0.02), 0px 2px 12px 0px rgba(13, 46, 166, 0.04), 0px 2px 6px 0px rgba(13, 46, 166, 0.02);
      border-radius: 8px;
      transition: all 0.4s;
      &:hover{
        transform: translateY(-10px);
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }




  }
}

.jiashichang {
  margin-bottom: 40px;

  .title {
    font-size: 20px;
    // font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.9);
    margin-bottom: 15px;
  }

  .shang {
    display: flex;
    justify-content: space-between;

    .sItem {
      width: 443px;
      height: 414px;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

    }
  }

  .zhong {
    margin: 24px 0;
    display: flex;
    justify-content: space-between;

    .zItem {
      width: 676px;
      height: 504px;
      background: #FFFFFF;
      box-shadow: 0px 1px 4px 0px rgba(13, 46, 166, 0.02), 0px 2px 12px 0px rgba(13, 46, 166, 0.04), 0px 2px 6px 0px rgba(13, 46, 166, 0.02);
      border-radius: 12px;
    }

    img {
      box-shadow: 0px 1px 4px 0px rgba(13, 46, 166, 0.02), 0px 2px 12px 0px rgba(13, 46, 166, 0.04), 0px 2px 6px 0px rgba(13, 46, 166, 0.02);
    }


  }

  .xia {
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    height: 496px;
    background: #FFFFFF;
    box-shadow: 0px 1px 4px 0px rgba(13, 46, 166, 0.02), 0px 2px 12px 0px rgba(13, 46, 166, 0.04), 0px 2px 6px 0px rgba(13, 46, 166, 0.02);
    border-radius: 12px;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.lv {
  border: 1px solid #0ED57D !important;
  color: #0ED57D !important;
}
</style>
